<template>
  <div>
    <el-table :data="articleList"
              style="width: 100%">
      <el-table-column label="序号"
                       type="index"
                       width="80">
      </el-table-column>
      <el-table-column prop="title"
                       label="文章标题"
                       width="350">
        <template slot-scope="scope">
          <span>{{scope.row.title}}<a href="javascript:;"
               :style="{color:iconColor}"
               v-if="scope.row.videoURL"
               @click="$emit('videoShow',scope.row.videoURL)"
               class="el-icon-film mouth-hand"></a></span>
        </template>
      </el-table-column>
      <el-table-column prop="visits"
                       label="阅读数"
                       width="180">
      </el-table-column>
      <el-table-column prop="username"
                       label="录入人"
                       width="180">
      </el-table-column>

      <el-table-column label="录入时间"
                       width="210"><template slot-scope="scope">{{scope.row.createTime | relativeTime }}</template>
      </el-table-column>
      <el-table-column label="状态"
                       width="100">
        <template slot-scope="scope">
          <p v-html="scope.row.state==0 ? '已禁用':'已启用'"></p>
        </template>
      </el-table-column>
      <el-table-column label="操作"
                       width="190">
        <template slot-scope="scope">
          <el-button type="text"
                     @click="lookData(scope.row)">预览</el-button>&nbsp;
          <el-button type="text"
                     v-html="scope.row.state==0 ? '禁用':'启用'"
                     @click="modifyState(scope.row)"></el-button>&nbsp;
          <el-button type="text"
                     :disabled="scope.row.state==1 ? false:true"
                     @click="edit(scope.row)">修改</el-button>&nbsp;
          <el-button type="text"
                     @click="openDelete(scope.row)">删除</el-button>&nbsp;
        </template>

      </el-table-column>
    </el-table>
    <br>

    <!-- 分页器 -->
    <el-pagination @size-change="
                     handleSizeChange"
                   @current-change="handleCurrentChange"
                   :current-page="query.pages"
                   :page-sizes="[5, 10, 20, 30,50]"
                   :page-size="query.pageSize"
                   layout="prev, pager, next, sizes, jumper"
                   :total="query.counts"
                   class="listPagination"
                   background>
    </el-pagination>
    <br>
    <br>
    <!-- 修改文章 -->
    <el-dialog :visible="isShow"
               :show-close='false'
               title="修改文章">
      <interview-add v-if="isShow"
                     @close='isShow=false'
                     :idx='idx'
                     @resetEditGetList='getList'></interview-add>
    </el-dialog>
    <!-- 预览文章 -->
    <el-dialog :visible.sync="lookShow"
               title="预览文章">
      <interview-look v-if="lookShow"
                      :LookList='lookDataList'
                      @close='lookShow=false'></interview-look>
    </el-dialog>

  </div>
</template>

<script>
import { list, changeState, remove } from '@/api/hmmm/articles'
import InterviewAdd from './interview-add.vue'
import InterviewLook from './interview-look.vue'
export default {
  components: { InterviewAdd, InterviewLook },
  name: 'interviewList',
  props: {
    value: null,
    state: {
      type: String,
      require: true
    },
    searchValue: {
      type: String,
      require: true
    }
  },
  data() {
    return {
      articleList: [],
      query: {
        // 每页大小
        pageSize: null,
        // 总数
        counts: 0,
        // 总页数
        pages: 0,
        // 当前页码
        page: 1
      },
      isShow: false,
      idx: '',
      iconColor: '#0000ff',
      lookShow: false,
      lookDataList: ''
    }
  },
  created() {
    this.getList()
  },
  methods: {
    //   获取文章列表
    async getList() {
      let res = await list({
        page: this.query.page,
        pagesize: this.query.pageSize,
        keyword: this.searchValue,
        state: this.state
      })
      this.$emit('input', res.data.counts)
      this.articleList = res.data.items
      this.query.page = res.data.page
      this.query.pageSize = Number(res.data.pagesize)
      this.query.counts = res.data.counts
    },
    // 页码变化
    handleSizeChange(val) {
      this.query.pageSize = val
      this.getList()
    },
    handleCurrentChange(val) {
      this.query.page = val
      this.getList()
    },
    //   修改状态
    async modifyState(val) {
      //   console.log(val.state)
      val.state == 0 ? (val.state = 1) : (val.state = 0)
      //   console.log(val.state)
      try {
        await changeState({
          id: val.id,
          state: val.state
        })
        this.$message.success('操作成功')
      } catch (error) {
        console.log(error)
        this.$message.error('操作失败')
      }
    },
    // 修改
    edit(val) {
      this.isShow = true
      //   console.log(val)
      this.idx = val
    },
    // 删除
    async openDelete(val) {
      //   console.log(val)
      try {
        await this.$confirm('此操作将永久删除该文件, 是否继续?', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        })
        await remove({
          id: val.id
        })
        if (this.articleList.length == 1) {
          this.query.page--
        }
        this.getList()
        this.$message({
          type: 'success',
          message: '删除成功!'
        })
      } catch (error) {
        this.$message({
          type: 'info',
          message: '已取消删除'
        })
      }
    },
    lookData(val) {
      //   console.log(val)
      this.lookShow = true
      this.lookDataList = val
    }
  }
}
</script>

<style lang='less' scoped>
.listPagination {
  position: absolute;
  right: 40px;
}
a {
  display: inline-block;
  cursor: hand;
}
</style>